<template>
  <div class="mid-block1">
    <div class="midtab clearfix">
      <ul id="tabLeft" class="tab-left">
        <li v-for="(item,index) in playerList" v-if="index===active" :key="index" class="tab-panel on">
          <div class="player"><d-player
            :ref="'player-'+index"
            :options="{
              video: {
                url: item.url,
                type: 'hls'
              },
              autoplay: true
            }"
          /></div>
          <!--          <div class="title text-ellipsis">-->
          <!--            标题展示-->
          <!--          </div>-->
        </li>
      </ul>
      <div class="tab-right">
        <ul class="nav-list scroll-wrap">
          <li v-for="(item,index) in playerList" :key="index" class="nav " :class="{'active': active===index}" @click="active=index">
            <div class="player"><d-player
              :ref="'player'+index"
              :options="{
                video: {
                  url: item.url,
                  type: 'hls'
                },
                mutex:false,
                autoplay: false,
              }"
            /></div>
            <div class="video-mask" />
            <div class="title text-ellipsis">
              {{ item.name }}
            </div>
            <!--            <video-player-->
            <!--              class="vjs-custom-skin"-->
            <!--              :options="{-->
            <!--                height: '240px',-->
            <!--                sources: [{-->
            <!--                  withCredentials: true,-->
            <!--                  type: 'application/x-mpegURL',-->
            <!--                  src: 'http://hls01open.ys7.com/openlive/7fd089145c3c422982aa17e5bdc6dd94.hd.m3u8'-->
            <!--                }],-->
            <!--                controlBar: {-->
            <!--                  timeDivider: false,-->
            <!--                  durationDisplay: false-->
            <!--                },-->
            <!--                flash: { hls: { withCredentials: false }},-->
            <!--                html5: { hls: { withCredentials: false }},-->
            <!--                poster: require('@/assets/img/t.jpg')-->
            <!--              }"-->
            <!--              @ready="playerReadied"-->
            <!--            />-->
            <!--            <div class="title text-ellipsis">-->
            <!--              标题展示标题展示标题展示标题展示标题展示标题展示标题展示-->
            <!--            </div>-->
          </li>
          <!--          <li class="nav">-->
          <!--            <img src="https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg">                                 <div class="title text-ellipsis">-->
          <!--              标题展示-->
          <!--            </div>-->
          <!--          </li>-->
          <!--          <li class="nav">-->
          <!--            <img src="https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg">-->
          <!--            <div class="title text-ellipsis">-->
          <!--              标题展示-->
          <!--            </div>-->
          <!--          </li>-->
          <!--          <li class="nav">-->
          <!--            <img src="https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg">-->
          <!--            <div class="title text-ellipsis">-->
          <!--              标题展示-->
          <!--            </div>-->
          <!--          </li>-->
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import VueDPlayer from 'vue-dplayer'
import 'vue-dplayer/dist/vue-dplayer.css'
import { postHandle } from '@/api'
window.Hls = require('hls.js')
export default {
  name: 'VideoShow',
  components: {
    'd-player': VueDPlayer
  },

  data() {
    return {
      active: 0,
      player: null,
      playerList: [
      {
			"appKey": "b8929dd935a64816867b547a607aece8",
			"appSecret": "b7245102fec53eb2fba2432c34633cec",
			"channelNo": 1,
			"ct": 1681372392573,
			"deviceSerial": "E65858740",
			"id": "6437b4e827c8d05438e980f0",
			"mt": 1681372392573,
			"name": "测试视频",
			"projectInfo": {
				"address": "陕西省西安市灞桥区116县道墨玉河景区西侧",
				"cinctureWeldAllNumber": 25,
				"cinctureWeldFinshNumber": 0,
				"city": "610100",
				"cityName": "西安市",
				"country": "610111",
				"countryName": "灞桥区",
				"craftsId": "642aa0c19e0ba051516ce4dc",
				"createUserId": "642a9d86f9768731b4653033",
				"ct": 1680766880222,
				"endTime": 1682524800000,
				"entSpaceId": "642a9cfbf9768731b4653031",
				"hotEntName": "恩科机电",
				"hotLevel": "1",
				"id": "642e77a09e0ba051516ce4e8",
				"initiateProjectId": "642a9ec29e0ba051516ce4d7",
				"latitude": 34.282806,
				"logo": "642a9d86f9768731b4653033/i/20230406/27b6f4e2-5dc9-4ec9-a4b0-16cc9c256d3e.png",
				"longitude": 109.127276,
				"mt": 1680766880233,
				"name": "练习项目",
				"portraitWeldAllNumber": 25,
				"portraitWeldFinshNumber": 0,
				"province": "610000",
				"provinceName": "陕西省",
				"repairMethod": "焊接",
				"screenName": "恩科机电",
				"spaceId": "642e77a0f9768731b4653056",
				"st": 1,
				"startTime": 1680710400000,
				"status": 0,
				"street": "610111001",
				"streetName": "纺织城街道",
				"v": 2,
				"weldAllNumber": 50,
				"weldFinshNumber": 0,
				"welderNumber": "LXPJ00001"
			},
			"sequence": 1,
			"spaceId": "642e77a0f9768731b4653056",
			"st": 1,
			"status": 0,
			"typeCode": "COMMON",
      'url':'rtmp://192.168.0.15/hlsram/live0',
			"v": 1
		} 
        // 'http://hls01open.ys7.com/openlive/43894b70f4e64091a553e02c28be8064.hd.m3u8',
        // 'http://hls01open.ys7.com/openlive/9ee6ab367a864e888ea1df4fb80c2077.hd.m3u8',
        // 'http://hls01open.ys7.com/openlive/00339b0d40724cb387d0bad9d02f5e6a.hd.m3u8'
      ]
    }
  },
  created() {
    this.getData()
  },
  methods: {
    getData() {
      // postHandle('/api/v1/welder-sbtx-second/video-comb/list', {
      //   d: {
      //     filters: [
      //       {
      //         field: 'projectId',
      //         operator: 'EQUALS',
      //         value: this.$route.query.id
      //       }
      //     ],
      //     sorts: [{ field: 'sequence', isDesc: false }]
      //   }
      // }).then(res => {
      //   this.playerList = res.result
      // })
    }
  }
}
</script>
<style>
 .tab-right .dplayer-controller{
   display: none;
 }
</style>
